<template>
    <div class="box-card" v-loading="loading">
        <div class="flex-stb title-div">
            <div class="bg">基础信息</div>
            <div class="linebg">
                <el-button type="primary" plain v-if="isReadonly" @click="openEdit">编辑</el-button>
            </div>
        </div>
        <div class="content">
            <el-form ref="editFormRef" :disabled="isReadonly" :model="baseInfoParams" :inline="true" :rules="editRules"
                label-width="120px" :show-message="!isReadonly" :validate-on-rule-change='false'>
                <el-form-item label="公司logo" prop="logo">
                    <div class="logo-div">
                        <el-image :src="baseInfoParams.logoFilePath" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
                            :preview-src-list="[baseInfoParams.logoFilePath]" fit="cover" />

                        <FileUpload v-if="!isReadonly" :limit="1" :fileType="['png', 'jpg', 'jpeg']"></FileUpload>
                    </div>
                </el-form-item>
                <el-row :gutter="24">
                    <el-col :span="12" :xs="12">
                        <el-form-item label="公司名称" prop="name">
                            <el-input v-model="baseInfoParams.name" placeholder="公司名称" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :xs="12">
                        <el-form-item label="统一信用代码" prop="uniformSocialCreditNo">
                            <el-input v-model="baseInfoParams.uniformSocialCreditNo" placeholder="统一信用代码" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12" :xs="12">
                        <el-form-item label="公司注册地址" prop="address">
                            <el-input v-model="baseInfoParams.address" placeholder="公司注册地址" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :xs="12">
                        <el-form-item label="分类" prop="companyClass">
                            <el-input v-model="baseInfoParams.companyClass" placeholder="分类" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12" :xs="12">
                        <el-form-item label="法定代表人" prop="legalRepresentative">
                            <el-input v-model="baseInfoParams.legalRepresentative" placeholder="法定代表人" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :xs="12">
                        <el-form-item label="办公电话" prop="officeTel">
                            <el-input v-model="baseInfoParams.officeTel" placeholder="办公电话" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12" :xs="12">
                        <el-form-item label="联系人" prop="contacter">
                            <el-input v-model="baseInfoParams.contacter" placeholder="联系人" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :xs="12">
                        <el-form-item label="电子邮箱" prop="email">
                            <el-input v-model="baseInfoParams.email" placeholder="电子邮箱" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12" :xs="12">
                        <el-form-item label="联系电话" prop="telNo">
                            <el-input v-model="baseInfoParams.telNo" placeholder="联系电话" clearable maxlength="11" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :xs="12">
                        <el-form-item label="成立日期" prop="establishmentDate">
                            <el-date-picker v-model="baseInfoParams.establishmentDate" type="date" placeholder="请选择"
                                style="width: 100%" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <div class="flex-vhc" v-if="!isReadonly">
                <el-button type="" style="width: 300px;height: 40px;margin-top: 30px;" @click="cancelEdit">取消</el-button>
                <el-button type="primary" style="width: 300px;height: 40px;margin-top: 30px;"
                    @click="submitEdit">更新信息</el-button>
            </div>
        </div>
    </div>
</template>
 
<script setup  >
import { getOrgBaseInfo } from "@/api/organization";
import useUserStore from '@/store/modules/user'
const { proxy } = getCurrentInstance();

const baseInfoParams = ref({
    pic: 'https://cdn.pixabay.com/photo/2020/07/14/20/25/prague-5405649_1280.jpg'
})
const isReadonly = ref(true)
const loading = ref(false)
//编辑校验
const editRules = ref({})

//分类
const kindOptions = ref([{
    value: '1',
    label: '分类',
}])


const getBaseInfo = () => {
    console.log(useUserStore().loginInfo)
    loading.value = true
    getOrgBaseInfo(useUserStore().loginInfo.useOrgId).then((res) => {
        loading.value = false
        if (res && res.data) {
            baseInfoParams.value = res.data
        }
    }).catch(() => {
        loading.value = false
    })
}

getBaseInfo()


//切换编辑状态
const openEdit = () => {
    editRules.value = {
        entName: [{ required: true, message: "公司名称不能为空", trigger: "blur" }],
        creditcode: [{ required: true, message: "统一信用代码不能为空", trigger: "blur" }],
        address: [{ required: true, message: "办公地址不能为空", trigger: "blur" }],
        kind: [{ required: true, message: "请选择分类", trigger: "change" }],
        legal: [{ required: true, message: "法人姓名不能为空", trigger: "blur" }],
        officePhone: [{ required: true, message: "办公电话不能为空", trigger: "blur" }],
        contactUser: [{ required: true, message: "联系人姓名不能为空", trigger: "blur" }],
        email: [{ required: true, message: "联系邮箱不能为空", trigger: "blur" }],
        contactPhone: [{ required: true, message: "联系人电话不能为空", trigger: "blur" }],
        componyCreateTime: [{ required: true, message: "请选择成立时间", trigger: "change" }]
    }
    isReadonly.value = false
}


//取消编辑
const cancelEdit = () => {
    editRules.value = {}
    isReadonly.value = true
    proxy.$refs["editFormRef"].clearValidate();
}

//提交修改
const submitEdit = () => {
    proxy.$refs["editFormRef"].validate(valid => {
        if (valid) {

        }
    })
}

</script>
 
<style lang="scss" scoped>
.box-card {
    margin: 30px 40px;

    .title-div {
        display: flex;
        width: 100%;
        height: 45px;

        .bg {
            width: 140px;
            height: 100%;
            color: #00A3FF;
            font-size: 16px;
            font-weight: bold;
            padding-top: 12px;
            padding-left: 17px;
            background-image: url("@/assets/images/baseinfo_titlebg.png");
            background-size: 100% 100%;
        }

        .linebg {
            flex: 1;
            display: flex;
            justify-content: flex-end;
            height: 100%;
            background-image: url("@/assets/images/baseinfo_title_line.png");
            background-size: 100% 100%;
        }
    }

    .content {
        padding: 30px;
        border-radius: 0px 0px 8px 8px;
        border: 1px solid #D9D9D9;
        border-top: none;
    }

    .el-image {
        width: 70px;
        height: 70px;
        border-radius: 70px;
    }

    .el-form--inline .el-form-item {
        width: 100%;
        max-width: 550px;
    }

    ::v-deep(.el-input.is-disabled .el-input__wrapper) {
        background-color: #ffffff !important;
    }


    .logo-div {
        margin-left: 30px;

        .el-image {
            margin-right: 20px;
        }
    }
}
</style>
 